<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="70px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="用户类型" prop="userType">
                                <el-select v-model="query.userType" placeholder="请选择" style="width:100%">
                                    <el-option v-for="item in userTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="日期" prop="reportDate">
                                <el-date-picker v-model="query.reportDate" :editable="false" :clearable="false" type="date" placeholder="请选择报表日期" style="width:100%" 
                                :picker-options="pickerOptions1"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="table" >
                <div class="table-title">
                    <exportExcel @ee="exportFile"></exportExcel>
                </div> 
                <el-table :data="AnnounceList" border v-loading="loading" style="width: 100%" :default-sort = "{prop: 'login', order: 'descending'}" @sort-change='sortChange'>
                    <el-table-column label="用户类型" align="center">
                        <template scope="scope">
                            <span>{{scope.row.userTypeName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="活跃用户量" align="center" sortable='custom' prop="userNumber">
                        <template scope="scope">
                            <span>{{scope.row.userNumber}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="区域" align="center">
                        <template scope="scope">
                            <span>{{scope.row.areaName | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="城市" align="center">
                        <template scope="scope">
                            <span>{{scope.row.cityName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="省份" align="center">
                        <template scope="scope">
                            <span>{{scope.row.provinceName| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="报表日期" align="center">
                        <template scope="scope">
                            <span>{{scope.row.date| isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
               <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" 
                :current-page.sync="listQuery.page" 
                :page-sizes="config.pageSizes" 
                :page-size="config.pageSize"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange">
                </el-pagination>
               </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import echartsLayout from 'components/TableLayout/echartsLayout';
    import exportExcel from 'components/ExportExcel';  
    import { mapState, mapActions } from 'vuex';
    import {regionActiveList} from 'api/pingtaifenxi';
    export default{
        name: 'areaActive',
        components: {province, city, region, echartsLayout, exportExcel},
        data() {
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                userTypeList: [{  
                    value: '',
                    label: '请选择'
                }, {
                    value: '1',
                    label: '家长'
                }, {
                    value: '2',
                    label: '教师'
                }, {
                    value: '4',
                    label: '学生'
                }],
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: '',
                    userType: '',
                    // reportDate: moment(new Date()).add(-1, 'days').format('YYYY-MM-DD') 
                    reportDate: moment(new Date()).format('YYYY-MM-DD') 
                },
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                userCountStatus: '1' // // 排序方式0升序  1降序
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.searchFetchData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            // 分页
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.searchFetchData();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.searchFetchData();
            },
           
            searchFetchData() {
                this.loading = true;
                let page = this.listQuery.page;
                let pageSize = this.config.pageSize;
                let provinceId = this.query.provinceId;
                let cityId = this.query.cityId;
                let areaId = this.query.areaId;
                let provinceName = this.query.provinceName;
                let cityName = this.query.cityName;
                let areaName = this.query.areaName;
                let date = moment(this.query.reportDate).format('YYYY-MM-DD'); 
                let userType=this.query.userType; // 用户类型，1家长 2老师 4学生
                let userNumberStatus=this.userCountStatus;// 排序方式0升序  1降序
                regionActiveList(page, pageSize, provinceId, cityId, areaId, provinceName, cityName, areaName, date, userType, userNumberStatus).then(res => {
                    this.loading = false;
                    this.loadingChart = false;
                    this.AnnounceList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                }).catch(() => {
                    this.loading = false;
                });
            },
            exportFile() {
                let provinceName = this.query.provinceName;
                let cityName = this.query.cityName;
                let areaName = this.query.areaName;
                let date = moment(this.query.reportDate).format('YYYY-MM-DD'); 
                let userType=this.query.userType; // 用户类型，1家长 2老师 4学生
                let userCountStatus=this.userCountStatus;// 排序方式0升序  1降序
                // console.log(userCountStatus)
                window.location.href = `${LOCAL_API.scy}/report/user/outExcelByRegionActive?provinceName=${provinceName}&cityName=${cityName}&areaName=${areaName}&date=${date}&userType=${userType}&userNumberStatus=${userCountStatus}`
            },
            onSubmit() {
                this.listQuery.page = 1;
                this.searchFetchData();
            },
            sortChange({ column, prop, order }) {
                this.userCountStatus=prop=='userNumber'?order=='ascending'?'0':'1':'';
                this.searchFetchData();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     